<PageHeader as |p|>
  <p.top>
    <nav class="breadcrumb">
      <ul>
        <li>
          <span class="sep">&#x0002f;</span>
          <LinkTo @route="vault.cluster.secrets.backend.overview" @model={{@backendPath}}>
            {{@backendPath}}
          </LinkTo>
        </li>
      </ul>
    </nav>
  </p.top>
  <p.levelLeft>
    <h1 data-test-title class="title is-3">
      {{@roleName}}
    </h1>
  </p.levelLeft>
</PageHeader>

<div class={{unless (eq this.roleType 'noRoleFound') "box is-fullwidth is-sideless is-marginless"}}>
  {{!-- ROLE TYPE NOT FOUND, returned when query on the creds and static creds both returned error --}}
  {{#if (eq this.roleType 'noRoleFound') }}
    <EmptyState
      @title={{this.errorTitle}}
      @subTitle="Error {{this.errorHttpStatus}}"
      @icon="alert-circle-outline"
      @bottomBorder={{true}}
      @message={{this.errorMessage}}
    >
      <nav class="breadcrumb">
        <ul class="is-grouped-split">
          <li>
            {{!-- Empty because they can't go "back" anywhere --}}
          </li>
          <li>
            <LearnLink @path="/vault/database-secrets" @class="has-text-grey">
              Need help?
            </LearnLink>
          </li>
        </ul>
      </nav>
    </EmptyState>
  {{/if}}
  {{#unless (or model.errorMessage (eq this.roleType 'noRoleFound'))}}
    <AlertBanner
      @type="warning"
      @message="You will not be able to access these credentials later, so please copy them now."
      data-test-warning
    />
  {{/unless}}
  {{!-- DYNAMIC ROLE --}}
  {{#if (and (eq this.roleType 'dynamic') model.username)}}
    <InfoTableRow @label="Username" @value={{model.username}}>
      <MaskedInput
        @value={{model.username}}
        @name="Username"
        @displayOnly={{true}}
        @allowCopy={{true}}
      />
    </InfoTableRow>
    <InfoTableRow @label="Password" @value={{model.password}}>
      <MaskedInput
        @value={{model.password}}
        @name="Password"
        @displayOnly={{true}}
        @allowCopy={{true}}
      />
    </InfoTableRow>
    <InfoTableRow @label="Lease ID" @value={{model.leaseId}} />
    <InfoTableRow @label="Lease Duration" @value={{format-duration model.leaseDuration }} />
  {{/if}}
  {{!-- STATIC ROLE --}}
  {{#if (and (eq this.roleType 'static') model.username)}}
    <InfoTableRow 
      @label="Last Vault rotation"
      @value={{date-format model.lastVaultRotation 'MMMM d yyyy, h:mm:ss a'}} 
      @tooltipText={{model.lastVaultRotation}}
    />
    <InfoTableRow @label="Password" @value={{model.password}}>
      <MaskedInput
        @value={{model.password}}
        @name="Password"
        @displayOnly={{true}}
        @allowCopy={{true}}
      />
    </InfoTableRow>
    <InfoTableRow @label="Username" @value={{model.username}} />
    <InfoTableRow @label="Rotation Period" @value={{format-duration model.rotationPeriod}} />
    <InfoTableRow @label="Time Remaining" @value={{format-duration model.ttl}} />
  {{/if}}
</div>
<div class="has-top-bottom-margin">
  <button
    type="button"
    onclick={{action "redirectPreviousPage"}}
    class="button is-primary"
    data-test-secret-generate-back="true"
  >
    Back
  </button>
</div>
